<template>
  <div class="left-wrapper">
    <!--    <div class="ele-left ele-left-up">-->
    <div class="ele-title-left">
      <!--        <img class="title-img" src="../../assets/img/b-img/title_bg.png" alt="">-->
      <span style="color: yellow">| </span>
      <span class="title-text">  数据同步 T+0 </span>
      <span style="color: yellow"> |</span>
      <!--        <img class="title-img" src="../../assets/img/b-img/title_bg.png" alt="">-->
    </div>
    <el-carousel class="real-data" height="230px">
      <el-carousel-item v-for="(item,index) in dataIntegrationArr" :key="index">
        <div class="total-title">
          {{ item.title }}
        </div>
        <el-row class="">
          <el-col class="mid mid-1">
            <span class="mid-title">日总增量</span>
            <span class="mid-data">{{ dataProcess(item.dayIncrease) }}条</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mid mid-2">
            <span class="mid-title">累计增量</span>
            <span class="mid-data">{{ dataProcess(item.totalIncrease) }}条</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mid mid-3">
            <span class="mid-title">最大延迟</span>
            <span class="mid-data">{{ item.maxDelay }} ms</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col class="mid mid-4">
            <span class="mid-title">同步表量</span>
            <span class="mid-data">{{ dataProcess(item.tableNums) }}张</span>
          </el-col>
        </el-row>
      </el-carousel-item>
    </el-carousel>
    <div class="ele-title-left">
      <!--        <img class="title-img" src="../../assets/img/b-img/title_bg.png" alt="">-->
      <span style="color: yellow">| </span>
      <span class="title-text"> 数据同步 T+1 </span>
      <span style="color: yellow"> |</span>
    </div>
    <div class="data-load ">
      <div class="data-load-head data-load-span">
      </div>
      <div class="data-load-body t1">
        <div class="data-load-span">
          <ul>
            <li v-for="(item,index) in dataIntegrationArrT1" :key="index"><span
                class="data-integration-t1">{{ item.systemName }}</span> <span
                class="data-integration-t1">{{ dataProcess(item.tableNumber) }}张</span></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import "@/assets/lib/jquery-1.8.0.js"
import "@/assets/lib/jquery.liMarquee.js"
import "@/assets/js/li_marquee.js"
import $ from 'jquery'
import animated from 'animate.css'
import MachineDetail from "./MachineDetail";

export default {
  name: "BussinessLeft",
  data() {
    return {
      verticaNum: Math.floor(Math.random() * 20) + 1,
      cdhNum: Math.floor(Math.random() * 20) + 1,
      hiveNum: Math.floor(Math.random() * 20) + 1,
      impalaNum: Math.floor(Math.random() * 20) + 1,
      dataIntegrationArr: [
        {title: '电子底账', dayIncrease: 181026783, totalIncrease: 96755564360, maxDelay: 50, tableNums: 397},
        {title: '核心征管', dayIncrease: 57171597, totalIncrease: 49389740429, maxDelay: 300, tableNums: 6639},
        {title: '电子税务局', dayIncrease: 0, totalIncrease: 462, maxDelay: 44, tableNums: 12},
        {title: '社保费', dayIncrease: 118247127, totalIncrease: 18630287975, maxDelay: 90, tableNums: 857},
        {title: '信息共享平台', dayIncrease: 40550490, totalIncrease: 6166029881, maxDelay: 14, tableNums: 298},
        {title: '核心征管', dayIncrease: 19072441, totalIncrease: 2122782060, maxDelay: 53, tableNums: 171},
        {title: '个税系统', dayIncrease: 329652, totalIncrease: 20624416, maxDelay: 15, tableNums: 3}
      ],
      dataIntegrationArrT1: [
        {systemName: "核心征管", tableNumber: 3569},
        {systemName: "电子底账", tableNumber: 262},
        {systemName: "防伪退税", tableNumber: 131},
        {systemName: "个税系统", tableNumber: 3},
        {systemName: "社保费", tableNumber: 543},
        {systemName: "信息共享平", tableNumber: 68},
        {systemName: "ITS清分", tableNumber: 270},
        {systemName: "个税核心", tableNumber: 328},
        {systemName: "二包应用库", tableNumber: 25},
        {systemName: "二包本地化", tableNumber: 24},
        {systemName: "服务大厅", tableNumber: 169},
        {systemName: "工商交换", tableNumber: 50},
        {systemName: "好差评", tableNumber: 6},
        {systemName: "实名办税", tableNumber: 130},
        {systemName: "房地产交易", tableNumber: 205},
        {systemName: "横向数据", tableNumber: 28},
        {systemName: "电子税务局", tableNumber: 791},
        {systemName: "税库银", tableNumber: 214},
        {systemName: "车船征收", tableNumber: 45},
        {systemName: "车辆购置税", tableNumber: 22},
        {systemName: "以地控税", tableNumber: 56},
      ]
    }
  },
  mounted() {
    setInterval(() => {
      this.changeValue();
    }, 10000)
  },
  methods: {
    reload() {
      this.$forceUpdate()
    },
    changeValue() {
      this.verticaNum = Math.floor(Math.random() * 20) + 1
      this.cdhNum = Math.floor(Math.random() * 20) + 1
      this.hiveNum = Math.floor(Math.random() * 20) + 1
      this.impalaNum = Math.floor(Math.random() * 20) + 1
    },
    dataProcess(num) {
      let numLength = String(num).length
      if (numLength <= 4) {
        return num + ' '
      } else if (numLength > 4 && numLength < 8) {
        num = this.fomatFloat(num / 10000, 1)
        return num + ' 万'
      } else if (numLength === 8) {
        num = this.fomatFloat(num / 10000000, 1)
        return num + ' 千万'
      } else {
        num = this.fomatFloat(num / 100000000, 1)
        return num + ' 亿'
      }
    },
    fomatFloat(value, n) {
      var f = Math.round(value * Math.pow(10, n)) / Math.pow(10, n);
      var s = f.toString();
      var rs = s.indexOf('.');
      if (rs < 0) {
        s += '.';
      }
      for (var i = s.length - s.indexOf('.'); i <= n; i++) {
        s += "0";
      }
      return s;
    }
  },
  components: {
    MachineDetail
  }
}
</script>
<style>
@import "../../assets/css/li_marquee.css";
</style>

<style scoped>
.left-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /*position: absolute;*/
}

ul {
  text-align: center;
}


.ele-title-left {
  margin: 12px 2px 0 4px;
  text-align: left;
  font: normal bold 8px arial, sans-serif;
  color: #ffffff;
  font-size: 0.8vw !important;
  /*background-color: #0d63b6;*/
  /*padding: auto;*/
}


.title-text {
  margin: auto;

  /*line-height: 14px;*/
}


/*title left down*/
.data-load-span > ul > li {
  margin: 15px 0;
  background-color: rgba(0, 169, 255, 0.1);
}

.data-load-span > ul > li:last-child {
  margin-bottom: 0 !important;
}


/*左下高度*/
.data-load {
  height: 80%;
  padding: 10px 0;
  /*margin-top: 10px;*/
}

.data-load-body, .t1 {
  width: 100%;
  height: 100%;
}

.data-load-span {
  margin: auto;
  text-align: center;
  font-size: 0.8vw;
}

.data-load-span > span {
  width: 48%;
  color: aqua;
  /*background-color: white;*/
  text-align: center;
}

/*中间部分样式*/
.real-data {
  color: #ffffff;
  font: normal 10px arial, sans-serif;
  position: relative;
  top: 2%;
}

.el-carousel__item {
  background: transparent;
}

.mid {
  margin: 11px 0;
}

.total-title {
  background: url("../../assets/img/b-img/left_mid_title.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}

.mid-title {
  position: relative;
  left: 7%;
  line-height: 26px;
  font-size: 0.8vw;
}

.mid-data {
  position: relative;
  left: 23%;
  font-size: 0.8vw;
}

.mid {
  background: url("../../assets/img/b-img/left_mid.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  /*margin-top: 9%;*/
  height: 26px;
  text-align: left;
}

.el-row {
  height: 14% !important;
}

.el-carousel__item {
  height: 100% !important;
}


.data-integration-t1 {
  display: inline-block;
  width: 48%;
  text-align: center;
}


</style>
